<template>
  <div class='lyric' v-show="isLyricShow">
    <div class="lyric-box" :style="{'transform': 'translateY(' + movingDistance +'px)'}">
      <div class="song-name fcCCC t-a-c mb10">{{ songName }}</div>
      <div class="author fcCCC t-a-c fs14 mb20">{{ songAuthor }}</div>
      <p v-show="arr.length > 1" class="fcCCC fs16 mt15 mb15"
        :style="{'color': lyricIndex == i ? 'white' : '#ccc'}" :index="i"
          v-for="(item, i) in arr" :key=item.uid>
          {{ item.lyric }}
      </p>
      <p class='fcCCC fs16 mt15 mb15 t-a-c'>{{ arr[0] }}</p>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "lyric",
  props: ["lyric", "songName", "songAuthor", "lyricIndex"],
  data() {
    return {
      lyricData: [],
      isLyricShow: false,
      arr: [],
      highlightFlag: false,
      movingDistance: 0
    }
  },
  watch: {
    lyric() {
      if (this.lyric === "无歌词") {
        this.arr = ["纯音乐，无歌词"]
      } else {
        this.lyricData = JSON.parse(JSON.stringify(this.lyric))
        this.lyricData = this.lyricData.split("\n")
        this.arr = []
        this.lyricData.forEach(item => {
          // 零宽断言：零宽度正回顾后发断言，
          // 它断言自身出现的位置的前面能匹配表达式 exp（[xx:xx:xxx]）
          // 后面必须写上 .+ 来匹配歌词内容
          let lyric
          let time
          const lyricReg =  /(?<=\[\d{2}:\d{2}.\d{3}\]).+/;
          const timeReg = /\[\d{2}:\d{2}.\d{3}\]/
          lyric = lyricReg.test(item) ? lyricReg.exec(item)[0] : ""
          time = timeReg.test(item) ? timeReg.exec(item)[0] : 0
          const reg = /\d{2}:\d{2}/
          time = reg.test(time) ? reg.exec(time)[0] : 0
          let uid = Math.random().toString().slice(-6)
          if (time !== 0) {
            this.arr.push({ lyric, time, uid })
          }
        })
      }
      this.movingDistance = 0
      this.$emit("updateLyric", this.arr)
    },
    lyricIndex() {
      this.movingDistance = -(this.lyricIndex * 30)
    }
  }
}
</script>

<style scoped lang="less">
  .lyric {
    width: 300px;
    height: 260px;
    overflow: hidden;
    background-color: #121212;
    bottom: 63px;
    right: 180px;
    padding: 30px 20px;
    .lyric-box {
      transition:transform 2s ease;
    }
  }
</style>